<!Doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <title>工具栏</title>
    <link th:href="@{/css/common.css}" rel="stylesheet">
    <link th:href="@{/css/layui.css}" rel="stylesheet">
    <link id="bootstrap-style" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <style>
        .imgStyle {
            margin: 0 !important;
        }
    </style>
</head>
<!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->
<script th:src="@{/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/js/layui.all.js}"></script>
<script th:src="@{/js/mxClient.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>

<script type="text/javascript">
    mxBasePath = '../static';
    // var arrVertexId = []; //节点
</script>

<!-- 引入支持库文件 -->

<!-- 示例代码 -->
<script type="text/javascript">
    $(function () {
        var windowHeight = $(window).height();
        $("#tbContainer").height(windowHeight * 0.55);
        $("#tbContainer").height(windowHeight * 0.4);
        layui.use('element', function () {
            var element = layui.element;
            element.render();
        });
    })
    window.onload = function () {
        main();
    };
    window.addEventListener("resize", function () {
        var windowHeight = $(window).height();
        $("#tbContainer").height(windowHeight * 0.55);
        $("#tbContainer").height(windowHeight * 0.4);
    })

    function mxIconSet(state) {
        this.images = [];
        var graph = state.view.graph;

        // Delete
        var img = mxUtils.createImage('img2/delete2.png');
        img.setAttribute('title', 'Delete');
        img.style.position = 'absolute';
        img.style.cursor = 'pointer';
        img.style.width = '20px';
        img.style.height = '20px';
        img.style.left = (state.x + state.width / 2 - 10) + 'px';
        img.style.top = (state.y + state.height / 2 - 10) + 'px';

        mxEvent.addGestureListeners(img,
            mxUtils.bind(this, function (evt) {
                // Disables dragging the image
                mxEvent.consume(evt);
            })
        );

        mxEvent.addListener(img, 'click',
            mxUtils.bind(this, function (evt) {
                graph.removeCells([state.cell]);
                mxEvent.consume(evt);
                this.destroy();
            })
        );

        state.view.graph.container.appendChild(img);
        this.images.push(img);
    };

    mxIconSet.prototype.destroy = function () {
        if (this.images != null) {
            for (var i = 0; i < this.images.length; i++) {
                var img = this.images[i];
                img.parentNode.removeChild(img);
            }
        }

        this.images = null;
    };

    function main() {
        //定义新连接的图标
        mxConnectionHandler.prototype.connectImage = new mxImage('img2/connector.gif', 16, 16);
        var deleteImage = new mxImage('img2/forbidden.png', 16, 16);
        // 检测浏览器兼容性
        if (!mxClient.isBrowserSupported()) {
            mxUtils.error('Browser is not supported!', 200, false);
        } else {
            // 创建工具栏容器
            // var tbContainer = document.createElement('div');
            // tbContainer.style.position = 'absolute';
            // tbContainer.setAttribute("id","tbContainer");
            // tbContainer.style.overflowY= 'scroll';
            // tbContainer.style.display = 'block';
            // tbContainer.style.padding = '2px';
            // tbContainer.style.left = '0px';
            // tbContainer.style.top = '26px';
            // tbContainer.style.width = '150px';
            // tbContainer.style.height = '550px';
            // // tbContainer.style.boxSizing = 'border-box';
            // tbContainer.style.bottom = '0px';
            // tbContainer.style.paddingLeft = '0px';
            // tbContainer.style.overflowX = 'hidden';
            //
            //
            // // tbContainer.style.borderRight = '2px solid #000';
            // tbContainer.style.backgroundColor = 'white';
            //
            // document.body.appendChild(tbContainer);
            var tbContainer = document.getElementById("tbContainer");
            // 创建工具栏监听工具
            var toolbar = new mxToolbar(tbContainer);
            toolbar.enabled = false;
            // 创建工具栏容器
            // var tbContainer1 = document.createElement('div');
            // tbContainer1.style.position = 'absolute';
            // tbContainer1.setAttribute("id","tbContainer1");
            // tbContainer1.style.overflow = 'scroll';
            // // tbContainer1.style.padding = '2px';
            // tbContainer1.style.left = '0px';
            // tbContainer1.style.top = '600px';
            // tbContainer1.style.width = '150px';
            // tbContainer1.style.bottom = '0px';
            // tbContainer.style.boxSizing = 'border-box';
            // // tbContainer1.style.paddingLeft = '10px';
            // // tbContainer1.style.paddingRight = '5px';
            // document.body.appendChild(tbContainer1);
            var tbContainer1 = document.getElementById("tbContainer1");

            // 创建工具栏监听工具
            var toolbar1 = new mxToolbar(tbContainer1);
            toolbar1.enabled = false

            // 在图形中创建容器
            container = document.createElement('div');
            container.style.position = 'absolute';
            // container.style.backgroundColor = '#578ebe';
            container.style.overflowY = 'scroll'
            container.style.overflowX = 'scroll';

            container.style.left = '167px';
            container.style.top = '26px';
            container.style.right = '85px';
            container.style.bottom = '0px';
            // container.style.background = 'url("editors/images/grid.gif")';
            container.style.background = 'url("img2/grid.gif")';
            // container.style.backgroundColor = 'white';

            document.body.appendChild(container);

            // 解决IE浏览器忽略的样式
            if (mxClient.IS_QUIRKS) {
                document.body.style.overflow = 'scroll';
                new mxDivResizer(tbContainer);
                new mxDivResizer(container);
            }

            // 在容器中创建图形和模型
            var model = new mxGraphModel();
            var graph = new mxGraph(container, model);
            var button = document.createElement("button");
            var divButton = document.createElement('div');
            button.innerHTML = "保存";
            button.setAttribute("type", "button");
            button.setAttribute("class", "btn btn-primary")
            button.setAttribute("id", "saveChart");
            divButton.style.position = 'absolute';
            // divButton.style.width="50px";
            // divButton.style.width="50px";
            divButton.style.right = '100px';
            divButton.style.top = '0px';
            divButton.appendChild(button);
            document.body.appendChild(divButton);
            //去锯齿效果
            mxRectangleShape.prototype.crisp = true;
            // 显示导航线
            mxGraphHandler.prototype.guidesEnabled = true;
            // Alt键禁用导航线
            mxGuide.prototype.isEnabledForEvent = function (evt) {
                return !mxEvent.isAltDown(evt);
            };
            // 显示终点
            mxEdgeHandler.prototype.snapToTerminals = false;
            // 禁用浏览器默认的右键菜单栏
            mxEvent.disableContextMenu(container);

            // 在已有容器内构造一个graph
            // 鼠标框选
            new mxRubberband(graph);
            // 在图形中创建默认组件
            var parent = graph.getDefaultParent();
            // 只可预览不可选中拖动连接
            graph.setEnabled(true);
            graph.isEnabled(true);
            // 容器大小自适应
            graph.setResizeContainer(false);
            // 动态改变样式
            graph.getView().updateStyle = true;
            // 可否重复连接
            graph.setMultigraph(false);
            // 禁止改变元素大小
            graph.setCellsResizable(false);
            // 允许连线的目标和源是同一元素
            graph.setAllowLoops(true);
            // graph.setCellsLocked(false);
            //页面初始化，加载已有的设备和设备之间的关联关系
            // 开始往module里添加cell
            // graph.addListener(mxEvent.CLICK, function(sender, evt) {
            //     var cell = evt.getProperty('cell');
            //     console.log(cell);
            //     var keyHandler = new mxKeyHandler(graph);
            //     keyHandler.bindKey(46, function(evt) {
            //         if (graph.isEnabled())
            //         {
            //             graph.removeCells(cell);
            //         }
            //     });
            //
            // });
            graph.getModel().beginUpdate();
            try {
                //new一个cell 以单元的形式创建一个节点
                // var cell = new mxCell(null, new mxGeometry(100, 200, 100, 100), "一些样式配置");//节点创建
                // cell.vertex = true;
                // //插入这个cell
                // graph.addCell(cell); //添加节点

                // var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
                // var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
                // console.log(typeof v1);
                //插入线条设置连接图形
                $.ajax({
                    type: "GET",
                    url: "/multipower/relationship/getGraphDragChart/" + 6,
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        console.log("data" + data);
                        console.log(typeof data);
                        console.log(typeof data.node);
                        if (data.node.length == 0) {
                            console.log(1);
                            window.parent.layerAlert('当前图谱无设备，请添加！', {

                                icon: 5,

                                title: "提示"

                            });
                            return false;

                        } else {
                            var node = data.node;
                            var edge = data.edge;
                            var nodeLength = data.node.length;
                            var edgeLength = data.edge.length;
                            console.log("边");
                            console.log(edge);
                            console.log("边");
                            console.log(node);
                            console.log("长度为:" + nodeLength);
                            var vertext = [];
                            var style = {};
                            var styleName = [];
                            for (var j = 0; j < nodeLength; j++) {
                                vertext[j] = {};
                                console.log(j);
                                var style = graph.getStylesheet().getDefaultVertexStyle();
                                var style1 = mxUtils.clone(style);
                                // style1[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
                                // style1[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
                                // style1[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
                                // style=mxUtils.clone(style);
                                // console.log(node[j].picPath);
                                style1[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;
                                style1[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
                                style1[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
                                style1[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER;
                                style1[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;

                                style1[mxConstants.STYLE_STROKECOLOR] = "transparent";
                                style1[mxConstants.STYLE_FILLCOLOR] = "#578ebe";
                                style1[mxConstants.STYLE_FONTCOLOR] = "white";
                                style1[mxConstants.STYLE_FONTSIZE] = "14";


                                style1[mxConstants.LABEL_HANDLE_SIZE] = 10;
                                style1[mxConstants.STYLE_IMAGE_WIDTH] = 50;
                                style1[mxConstants.STYLE_IMAGE_HEIGHT] = 50;
                                style1[mxConstants.STYLE_IMAGE] = node[j].picPath;
                                styleName[j] = 'style' + j;
                                graph.getStylesheet().putCellStyle(styleName[j], style1);
                                console.log("start");
                                vertext[j] = graph.insertVertex(parent, node[j].deviceId, node[j].deviceName, node[j].coordinate[0], node[j].coordinate[1], 100, 80, styleName[j]);
                                console.log(vertext[j]);
                            }
                            //  for(var i=0;i<edgeLength;i++){
                            //     graph.insertEdge(parent,null,'',graph.insertVertex(parent, edge[i].desc.split("#")[0], edge[i].deviceName[0], edge[i].line[0][0], edge[i].line[0][1], 80, 30),
                            //         graph.insertVertex(parent, edge[i].desc.split("#")[1], edge[i].deviceName[1], edge[i].line[1][0], edge[i].line[1][1], 80, 30))
                            // }

                            // var styleEdge = graph.getStylesheet().getDefaultEdgeStyle();
                            // var styleEdge1 = mxUtils.clone(styleEdge);
                            // styleEdge1[mxConstants.STYLE_FONTCOLOR] = "white";
                            // styleEdge1[mxConstants.STYLE_FONTSIZE] = "14";
                            // styleEdge1[mxConstants.STYLE_STROKECOLOR] = "white";

                            graph.getStylesheet().putCellStyle('styleEdge1', styleEdge1);
                            for (var indexV = 0; indexV < nodeLength; indexV++) {
                                for (var i = 0; i < nodeLength; i++) {
                                    var desc = node[indexV].deviceId.toString() + "#" + node[i].deviceId.toString();
                                    for (var j = 0; j < edgeLength; j++) {
                                        if (desc == edge[j].desc) {
                                            graph.insertEdge(parent, null, edge[j].typeName, vertext[indexV], vertext[i], 'fontSize=14');
                                        }
                                    }
                                }
                            }
                        }
                    }
                })
                // var e1 = graph.insertEdge(parent, null, '', graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30), graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30));

                //预览时鼠标悬浮到节点时，改变鼠标样式
                graph.getCursorForCell = function (cell) {
                    if (cell != null && cell.value != null && cell.vertex == 1) {
                        return 'pointer';
                    }
                };
                // $("#saveV").click(function(){
                //     var encoder = new mxCodec();
                //     var node = encoder.encode(graph.getModel());
                //     var xml=mxUtils.getXml(node);
                //     console.log(xml);
                //     console.log(typeof xml);
                //     $.ajax({
                //         type: "GET",
                //         url: "/multipower/device/updateDeviceCoordinates",
                //         dataType: "json",
                //         async:false,
                //         data:{xmlString:xml},
                //         success: function (data) {
                //             if(data.message=='success'){
                //                 window.parent.layerAlert('保存成功!', {
                //
                //                     icon: 6,
                //
                //                     title: "提示"
                //
                //                 });
                //             }
                //         }
                //     })
                // })

            } finally {
                // 更新事务结束
                graph.getModel().endUpdate();
            }
            // $.ajax({
            //     type: "GET",
            //     url: "/multipower/energyType/getAllEnergyType",
            //     dataType: "json",
            //     async: false,
            //     success: function (data) {
            //         var energyList=data;
            //         for(var i=0;i<energyList.length;i++){
            //             var img = mxUtils.createImage('img2/arrowImg2.png');
            //             var imgDiv = document.createElement("div");
            //             imgDiv.style.position = 'relative';
            //             imgDiv.style.left = "20px";
            //             imgDiv.style.width = "40px";
            //             imgDiv.style.height = "40px";
            //             imgDiv.style.marginBottom = "10px";
            //             imgDiv.style.backgroundColor = "#568dbd";
            //             imgDiv.appendChild(img);
            //             var img1 = mxUtils.createImage(energyList[i].iconPath);
            //             img1.style.width = '15px';
            //             img1.style.height = '15px';
            //             var imgDiv1 = document.createElement("div");
            //             imgDiv1.style.position = 'absolute';
            //             imgDiv1.appendChild(img1);
            //             imgDiv1.style.top = "50%";
            //             imgDiv1.style.left = "50%";
            //             imgDiv1.setAttribute('title',energyList[i].typeName);
            //             imgDiv1.style.transform = "translate(-50%,-50%)";
            //             imgDiv.appendChild(imgDiv1);
            //             img.style.width = '40px';
            //             img.style.height = '40px';
            //             img.style.zIndex = "999";
            //             img.setAttribute("title",energyList[i].typeName);
            //             tbContainer1.appendChild(imgDiv);
            //             document.body.appendChild(tbContainer1);
            //             var graphF = function(evt)
            //             {
            //                 var x = mxEvent.getClientX(evt);
            //                 var y = mxEvent.getClientY(evt);
            //                 var elt = document.elementFromPoint(x, y);
            //
            //                 // for (var i = 0; i < graphs.length; i++)
            //                 // {
            //                 if (mxUtils.isAncestorNode(graph.container, elt))
            //                 {
            //                     return graph;
            //                 }
            //                 // }
            //
            //                 return null;
            //             };
            //             var typeName=[];
            //             typeName.push(energyList[i].typeName);
            //             // var funct = function(graph, evt, target, x, y)
            //             // {
            //             //     var cell = new mxCell(name, new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;backgroundImage=url(http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png)');
            //             //     cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
            //             //     cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
            //             //     //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
            //             //     cell.geometry.relative = true;
            //             //     cell.edge = true;
            //             //     var cells = graph.importCells([cell], x, y, target);
            //             //
            //             //     if (cells != null && cells.length > 0)
            //             //     {
            //             //         graph.scrollCellToVisible(cells[0]);
            //             //         graph.setSelectionCells(cells);
            //             //     }
            //             // };
            //             function funct(graph, evt,target, x, y)
            //             {
            //                 console.log(graph);
            //                 var cell = new mxCell(name, new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;backgroundImage=url(http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png)');
            //                 cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
            //                 cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
            //                 //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
            //                 cell.geometry.relative = true;
            //                 cell.edge = true;
            //                 var cells = graph.importCells([cell], x, y, target);
            //
            //                 if (cells != null && cells.length > 0)
            //                 {
            //                     graph.scrollCellToVisible(cells[0]);
            //                     graph.setSelectionCells(cells);
            //                 }
            //             };
            //             var dragElt = document.createElement('div');
            //             dragElt.style.border = 'dashed black 1px';
            //             dragElt.style.width = '120px';
            //             dragElt.style.height = '40px';
            //
            //             var ds = mxUtils.makeDraggable(img, graphF,funct, dragElt, null, null, graph.autoscroll, true);
            //
            //             // Redirects feature to global switch. Note that this feature should only be used
            //             // if the the x and y arguments are used in funct to insert the cell.
            //             ds.isGuidesEnabled = function()
            //             {
            //                 return graph.graphHandler.guidesEnabled;
            //             };
            //
            //             // Restores original drag icon while outside of graph
            //             ds.createDragElement = mxDragSource.prototype.createDragElement;
            //         }
            //     }
            // })

            //去锯齿效果
            mxRectangleShape.prototype.crisp = true;
            // 显示导航线
            mxGraphHandler.prototype.guidesEnabled = true;
            // Defines the tolerance before removing the icons
            var iconTolerance = 20;

            // Shows icons if the mouse is over a cell

            graph.addMouseListener(
                {
                    currentState: null,
                    currentIconSet: null,
                    mouseDown: function (sender, me) {
                        // Hides icons on mouse down
                        if (this.currentState != null) {
                            this.dragLeave(me.getEvent(), this.currentState);
                            this.currentState = null;
                        }
                    },

                    mouseMove: function (sender, me) {
                        if (this.currentState != null && (me.getState() == this.currentState ||
                            me.getState() == null)) {
                            var tol = iconTolerance;
                            var tmp = new mxRectangle(me.getGraphX() - tol, me.getGraphY() - tol, 2 * tol, 2 * tol);
                            if (mxUtils.intersects(tmp, this.currentState)) {
                                return;
                            }
                        }

                        var tmp = graph.view.getState(me.getCell());

                        // Ignores everything but vertices
                        if (graph.isMouseDown || (tmp != null && !graph.getModel().isVertex(tmp.cell) && !graph.getModel().isEdge(tmp.cell))) {
                            tmp = null;
                        }

                        if (tmp != this.currentState) {
                            if (this.currentState != null) {
                                this.dragLeave(me.getEvent(), this.currentState);
                            }

                            this.currentState = tmp;

                            if (this.currentState != null) {
                                this.dragEnter(me.getEvent(), this.currentState);
                            }
                        }
                    },
                    mouseUp: function (sender, me) {
                    },
                    dragEnter: function (evt, state) {
                        if (this.currentIconSet == null) {
                            this.currentIconSet = new mxIconSet(state);
                        }
                    },
                    dragLeave: function (evt, state) {
                        if (this.currentIconSet != null) {
                            this.currentIconSet.destroy();
                            this.currentIconSet = null;
                        }
                    }
                });

            //在图中，启用新的连接
            graph.setConnectable(false);
            graph.setMultigraph(false);
            var styleEdge = graph.getStylesheet().getDefaultEdgeStyle();
            var styleEdge1 = mxUtils.clone(styleEdge);
            styleEdge1[mxConstants.STYLE_FONTCOLOR] = "white";
            styleEdge1[mxConstants.STYLE_FONTSIZE] = "14";
            styleEdge1[mxConstants.STYLE_STROKECOLOR] = "white";
            // 按下回车和空格键停止编辑
            var keyHandler = new mxKeyHandler(graph);
            // var rubberband = new mxRubberband(graph);
            var addVertex = function (id, name, icon, w, h, style) {
                var vertex = new mxCell(name, new mxGeometry(0, 0, w, h), style);
                // vertex.setId(id);
                // console.log("id="+id);
                vertex.setVertex(true);
                console.log(icon);
                // var img= addToolbarItem(name,graph, toolbar, vertex, icon);
                var imgDiv = addToolbarItem(id, name, graph, toolbar, vertex, icon);
                // mxEvent.addListener(imgDiv, 'mousedown', function(evt)
                // {
                //     // do nothing
                //     var a=1;
                //     console.log("鼠标在上面");
                //     console.log(imgDiv);
                //     if(a==1){
                //         console.log(1);
                //         window.parent.layerAlert('该设备已存在，无法拖入编辑区', {
                //
                //             icon: 5,
                //
                //             title: "提示"
                //
                //         });return false;
                //     }
                // });
                // console.log(img);
                // img.enabled = true;
                // img.style.width="40px";
                // img.setAttribute('title', name);
                // img.style.backgroundColor="#578ebe";
            };
            var addEdge = function (name, icon, w, h, style) {
                var cell = new mxCell(name, new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;');
                // var cell = new mxCell(name, new mxGeometry(0, 0, 50, 50), style);
                cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                cell.geometry.relative = true;
                cell.edge = true;
                // var img= addToolbarItem1(name,graph, toolbar1, cell, icon);
                addToolbarItem1(name, graph, toolbar1, cell, icon);
                // img.style.width="40px";
                // img.setAttribute('title', name);
                // img.style.backgroundColor="#578ebe";

            }
            // addEdge("冷",'img2/arrowImg1.png',50,50,'')
            // addEdge("热",'img2/arrowImg1.png',50,50,'');

            // var graphF = function(evt)
            // {
            //     var x = mxEvent.getClientX(evt);
            //     var y = mxEvent.getClientY(evt);
            //     var elt = document.elementFromPoint(x, y);
            //
            //     // for (var i = 0; i < graphs.length; i++)
            //     // {
            //     if (mxUtils.isAncestorNode(graph.container, elt))
            //     {
            //         return graph;
            //     }
            //     // }
            //
            //     return null;
            // };
            // var funct = function(graph, evt, target, x, y)
            // {
            //     var cell = new mxCell('冷', new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;backgroundImage=url(http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png)');
            //     cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
            //     cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
            //     //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
            //     cell.geometry.relative = true;
            //     cell.edge = true;
            //     var cells = graph.importCells([cell], x, y, target);
            //
            //     if (cells != null && cells.length > 0)
            //     {
            //         graph.scrollCellToVisible(cells[0]);
            //         graph.setSelectionCells(cells);
            //     }
            // };
            // var dragElt = document.createElement('div');
            // dragElt.style.border = 'dashed black 1px';
            // dragElt.style.width = '120px';
            // dragElt.style.height = '40px';
            //
            // var ds = mxUtils.makeDraggable(img, graphF,funct, dragElt, null, null, graph.autoscroll, true);
            //
            // // Redirects feature to global switch. Note that this feature should only be used
            // // if the the x and y arguments are used in funct to insert the cell.
            // ds.isGuidesEnabled = function()
            // {
            //     return graph.graphHandler.guidesEnabled;
            // };
            //
            // // Restores original drag icon while outside of graph
            // ds.createDragElement = mxDragSource.prototype.createDragElement;
            // var addEdge = function(name,icon, w, h, style)
            // {
            //     var edge = new mxCell(name, new mxGeometry(0, 0, w, h), style);
            //     edge.setEdge(true);
            //     var img= addToolbarItemEdge(graph, toolbar1, edge, icon);
            //     console.log(img);
            //     img.enabled = true;
            //     img.style.width="40px";
            //     img.setAttribute('title', name);
            //     img.style.backgroundColor="#578ebe";
            // };
            //插入线条设置连接图形
            $.ajax({
                type: "GET",
                url: "/multipower/device/getGraphDeviceList/" + 6,
                dataType: "json",
                async: false,
                success: function (data) {
                    var node = data.graphDeviceList;
                    var nodeLength = data.graphDeviceList.length;
                    console.log(nodeLength);

                    var styleName = [];
                    for (var i = 0; i < nodeLength; i++) {
                        var style = graph.getStylesheet().getDefaultVertexStyle();
                        var style1 = mxUtils.clone(style);
                        // style1[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
                        // style1[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
                        // style1[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
                        // style=mxUtils.clone(style);
                        // console.log(node[j].picPath);
                        style1[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;
                        // style1[mxConstants.STYLE_ALIGN]=mxConstants.ALIGN_BOTTOM;
                        style1[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
                        style1[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER;
                        style1[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;

                        style1[mxConstants.STYLE_STROKECOLOR] = "transparent";
                        style1[mxConstants.STYLE_FILLCOLOR] = "#578ebe";
                        style1[mxConstants.STYLE_FONTCOLOR] = "white";
                        style1[mxConstants.STYLE_FONTSIZE] = "14";

                        style1[mxConstants.LABEL_HANDLE_SIZE] = 50;
                        style1[mxConstants.STYLE_LABEL_POSITION] = mxConstants.ALIGN_BOTTOM;
                        style1[mxConstants.STYLE_IMAGE_WIDTH] = 50;
                        style1[mxConstants.STYLE_IMAGE_HEIGHT] = 50;
                        style1[mxConstants.STYLE_IMAGE] = node[i].picPath;
                        styleName[i] = 'style' + i;
                        console.log(styleName[i]);
                        graph.getStylesheet().putCellStyle(styleName[i], style1);
                        addVertex(node[i].deviceId, node[i].deviceName, node[i].picPath, 100, 80, styleName[i]);
                        // toolbar.addLine();
                        // var vertex = new mxCell(node[i].deviceName, new mxGeometry(0, 0, 100, 80), styleName[i]);
                        // vertex.setVertex(true);
                        //
                        // var img= addToolbarItem(graph, toolbar, vertex, node.picPath);
                        // img.enabled = true;
                        // img.style.width="80px";
                        // img.setAttribute('title', node[i].deviceName);
                    }
                }
            })
            $.ajax({
                type: "GET",
                url: "/multipower/energyType/getAllEnergyType",
                dataType: "json",
                async: false,
                success: function (data) {
                    var energyList = data;
                    var styleNameEdge = [];
                    for (var i = 0; i < energyList.length; i++) {
                        // styleNameEdge[i]='styleEdge'+i;
                        // var styleEdge = graph.getStylesheet().getDefaultEdgeStyle();
                        // var styleEdge1 = mxUtils.clone(styleEdge);
                        // styleEdge1[mxConstants.STYLE_FONTCOLOR]="white";
                        // styleEdge1[mxConstants.STYLE_FONTSIZE]="14";
                        // styleEdge1[mxConstants.STYLE_STROKECOLOR]="white";
                        // styleEdge1[mxConstants.STYLE_IMAGE_BACKGROUND]=energyList[i].iconPath;
                        // styleEdge1[mxConstants.STYLE_IMAGE]=energyList[i].iconPath;
                        // graph.getStylesheet().putCellStyle('edge1',styleEdge1);
                        addEdge(energyList[i].typeName, energyList[i].iconPath, 50, 50, '');
                    }
                }
            })
            /*禁用节点双击，防止改变数据 */
            graph.dblClick = function (evt, cell) {
                var model = graph.getModel();
                if (model.isVertex(cell)) {
                    return false;
                }
            };
            //重写方法不允许那条线(edge)可以编辑
            graph.isCellEditable = function (cell) {
                return !this.getModel().isEdge(cell) && !this.getModel().isVertex(cell);
            };

            function addToolbarItem(id, name, graph, toolbar, prototype, image) {
                // 添加、删除功能
                var funct = function (graph, evt, cell) {
                    graph.stopEditing(false);

                    var pt = graph.getPointForEvent(evt);
                    var vertex = graph.getModel().cloneCell(prototype);
                    vertex.setId(id);
                    // var vertex = graph.getModel().cloneInvalidEdges(prototype);
                    vertex.geometry.x = pt.x;
                    vertex.geometry.y = pt.y;
                    console.log("当前设备的ID为:" + id);
                    graph.addCell(vertex);
                    graph.setSelectionCell(vertex);
                }
                // 创建拖动预览图标
                var img = toolbar.addMode(null, image, funct);
                var imgDiv = document.createElement("div");
                var imgDiv2 = document.createElement('div');
                imgDiv2.style.backgroundColor = "#568dbd";
                img.style.width = "40px";
                img.style.height = "40px";
                img.setAttribute('class', "imgStyle");
                img.setAttribute('id', id);
                // imgDiv.style.position = 'relative';
                // imgDiv.style.left = "20px";
                imgDiv.style.width = "40px";
                // imgDiv.style.height = "40px";
                imgDiv.style.marginBottom = "40px";
                imgDiv.style.textAlign = "center";
                imgDiv2.style.width = "40px";
                imgDiv2.style.position = 'relative';
                imgDiv2.style.left = '46px';

                // imgDiv.style.backgroundColor = "#568dbd";
                imgDiv2.appendChild(img);
                var imgDiv1 = document.createElement('div');
                imgDiv1.innerHTML = name;
                imgDiv1.style.width = "133px";
                imgDiv1.style.wordWrap = "break-word";
                imgDiv1.style.position = "absolute";
                imgDiv1.style.left = "50%";
                imgDiv1.style.transform = "translateX(-50%)";

                // imgDiv1.style.textAlign="center";
                imgDiv2.appendChild(imgDiv1);
                imgDiv.appendChild(imgDiv2);
                mxUtils.makeDraggable(imgDiv, graph, funct);
                var mytoolBar1 = document.getElementById("tbContainer");
                mytoolBar1.appendChild(imgDiv);

                mxEvent.addListener(imgDiv, 'mousedown', function (evt) {
                    var mxGraph = graph;
                    var parent = mxGraph.getDefaultParent();
                    var parentChildren = parent.children;
                    var arrEdge = [];   //连接线
                    var arrVertexId = []; //节点

                    var arrVertexName = []; //节点
                    console.log("拖拽时当前的设备id为:" + id);
                    //获取所有信息
                    for (var i = 0; i < parentChildren.length; i++) {
                        var child = parentChildren[i];
                        if (!child.isVisible()) {
                            continue;
                        }
                        //区分连接线、节点
                        if (child.isEdge()) {
                            var obj = new Object();
                            obj.ID = child.id;
                            obj.SourceID = child.source.id;
                            obj.TargetID = child.target.id;
                            arrEdge.push(obj)
                        } else if (child.isVertex()) {
                            // var obj = new Object();
                            // obj.ID = child.id;
                            // obj.Name = child.value;
                            // obj.LeftTopX = child.geometry.x;
                            // obj.LeftTopY = child.geometry.y;
                            arrVertexId.push(child.id);
                            arrVertexName.push(child.value);

                        }
                    }
                    if (arrVertexId.indexOf(id) > -1) {
                        $("#delcfmModel1").modal("show");
                    }
                    console.log(arrVertexId);
                    console.log(arrVertexName);
                    // do nothing
                    // var a=1;
                    // console.log("鼠标在上面");
                    // console.log(img);
                    // if(a==1){
                    //     $("#delcfmModel1").modal("show");
                    // }
                });
                return imgDiv;
            }

            function addToolbarItem1(name, graph, toolbar, prototype, image) {
                // 添加、删除功能
                function funct(graph, evt, target, x, y) {
                    var cell = new mxCell(name, new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;');
                    cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                    cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                    //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                    cell.geometry.relative = true;
                    cell.edge = true;
                    var cells = graph.importCells([cell], x, y, target);
                    if (cells != null && cells.length > 0) {
                        graph.scrollCellToVisible(cells[0]);
                        graph.setSelectionCells(cells);
                    }
                };
                // 创建拖动预览图标
                var img = toolbar.addMode(null, image, funct);
                var img1 = mxUtils.createImage('img2/arrowImgUse.png');
                var imgDiv = document.createElement("div");
                imgDiv.style.position = 'relative';
                imgDiv.style.left = "46px";
                imgDiv.style.width = "40px";
                imgDiv.style.height = "40px";
                imgDiv.style.marginBottom = "10px";
                imgDiv.style.marginTop = "10px";
                imgDiv.style.backgroundColor = "#568dbd";
                img1.style.width = '40px';
                img1.style.height = '40px';
                img1.style.zIndex = "999";
                img1.setAttribute("title", name);
                imgDiv.appendChild(img1);
                // var img1 = mxUtils.createImage(image);
                img.style.width = '20px';
                img.style.height = '20px';
                img.style.margin = "0px";
                var imgDiv1 = document.createElement("div");
                imgDiv1.style.position = 'absolute';
                imgDiv1.appendChild(img);
                imgDiv1.style.top = "50%";
                imgDiv1.style.left = "50%";
                imgDiv1.setAttribute('title', name);
                imgDiv1.style.transform = "translate(-50%,-50%)";
                imgDiv.appendChild(imgDiv1);
                mxUtils.makeDraggable(imgDiv, graph, funct);
                var mytoolBar = document.getElementById("tbContainer1");
                mytoolBar.appendChild(imgDiv);
                // return img;
            }

            // var addVertex = function(name,icon, w, h, style)
            // {
            //     var vertex = new mxCell(name, new mxGeometry(0, 0, w, h), style);
            //     vertex.setVertex(true);
            //
            //    var img= addToolbarItem(graph, toolbar, vertex, icon);
            //    console.log(img);
            //     // img.enabled = true;
            //     // img.style.width="80px";
            //     // img.setAttribute('title', name);
            // };
            // var style = graph.getStylesheet().getDefaultVertexStyle();
            // var style1 = mxUtils.clone(style);
            // // style1[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
            // // style1[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
            // // style1[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
            // // style=mxUtils.clone(style);
            // // console.log(node[j].picPath);
            // style1[mxConstants.STYLE_SHAPE]=mxConstants.SHAPE_LABEL;
            // // style1[mxConstants.STYLE_ALIGN]=mxConstants.ALIGN_BOTTOM;
            // style1[mxConstants.STYLE_VERTICAL_ALIGN]=mxConstants.ALIGN_BOTTOM;
            // style1[mxConstants.STYLE_IMAGE_ALIGN]=mxConstants.ALIGN_CENTER;
            // style1[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN]=mxConstants.ALIGN_TOP;
            //
            // style1[mxConstants.STYLE_STROKECOLOR]="transparent";
            // style1[mxConstants.STYLE_FILLCOLOR]="transparent";
            // style1[mxConstants.STYLE_FONTCOLOR]="black";
            // style1[mxConstants.STYLE_FONTSIZE]="14";
            // //
            // //
            // style1[mxConstants.LABEL_HANDLE_SIZE]=50;
            // style1[mxConstants.STYLE_LABEL_POSITION]=mxConstants.ALIGN_BOTTOM;
            // style1[mxConstants.STYLE_IMAGE_WIDTH]=50;
            // style1[mxConstants.STYLE_IMAGE_HEIGHT]=50;
            // style1[mxConstants.STYLE_IMAGE]='http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png';
            // graph.getStylesheet().putCellStyle('style1',style1);
            // addVertex('123','http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png', 100, 80, 'style1');
            // addVertex('editors/images/rounded.gif', 100, 40, '');
            // addVertex('editors/images/ellipse.gif', 40, 40, '');
            // addVertex('editors/images/rhombus.gif', 40, 40, '');
            // addVertex('editors/images/triangle.gif', 40, 40, '');
            // addVertex('editors/images/cylinder.gif', 40, 40, '');
            // addEdge('123','http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png', 30, 40, '');
            // toolbar.addLine();
            // graph.container.setAttribute('tabindex', '-1');
            // graph.container.focus();


            // var button = mxUtils.button('Create toolbar entry from selection', function(evt)
            // {
            //     if (!graph.isSelectionEmpty())
            //     {
            //         // 创建一个副本，并保存它的状态
            //         var cells = graph.getSelectionCells();
            //         var bounds = graph.getView().getBounds(cells);
            //
            //         // 添加、删除功能
            //         var funct = function(graph, evt, cell)
            //         {
            //             graph.stopEditing(false);
            //
            //             var pt = graph.getPointForEvent(evt);
            //             var dx = pt.x - bounds.x;
            //             var dy = pt.y - bounds.y;
            //
            //             var clones = graph.importCells(cells, dx, dy);
            //             graph.setSelectionCells(clones);
            //         }
            //
            //         // 创建拖动预览图标
            //         var img = toolbar.addMode(null, 'editors/images/outline.gif', funct);
            //         mxUtils.makeDraggable(img, graph, funct);
            //     }
            // });

            // var deviceDiv0=document.createElement("div");
            // deviceDiv0.setAttribute("class","layui-collapse");
            // var deviceDiv=document.createElement("div");
            // deviceDiv.setAttribute("class","layui-colla-item");
            // var deviceDiv1=document.createElement("div");
            // deviceDiv1.setAttribute("class","layui-colla-title");
            // deviceDiv1.innerHTML="设备列表"
            // var deviceDiv2=document.createElement("div");
            // deviceDiv2.setAttribute("class","layui-colla-content layui-show");
            // deviceDiv2.setAttribute("id","deviceList");
            // deviceDiv2.innerHTML="123123123123123";
            // var tbContainer=document.getElementById("tbContainer");
            // deviceDiv.appendChild(deviceDiv1);
            // deviceDiv.appendChild(deviceDiv2);
            // deviceDiv0.appendChild(deviceDiv);
            //
            // tbContainer.appendChild(deviceDiv0);

            // var deviceDiv=document.createElement("div");
            // deviceDiv.innerHTML="设备列表";
            // deviceDiv.style.fontSize="14px";
            // deviceDiv.style.position="absolute";
            // deviceDiv.style.top="0px";
            // var deviceDiv1=document.createElement("div");
            // deviceDiv1.innerHTML="属性列表";
            // deviceDiv1.style.fontSize="14px";
            // deviceDiv1.style.position="absolute";
            // deviceDiv1.style.top="580px"
            // deviceDiv1.style.left="0px";
            // var img=document.createElement("img");
            // img.setAttribute("src","img2/expanded.gif");
            // img.setAttribute("onclick","up(this)");
            // img.style.width="20px";
            // img.style.height="20px";
            // img.style.position="absolute";
            // img.style.top="0px";
            // img.style.left="65px";
            // var img1=document.createElement("img");
            // img1.setAttribute("src","img2/expanded.gif");
            // img1.setAttribute("onclick","up1(this)");
            // img1.style.width="20px";
            // img1.style.height="20px";
            // img1.style.position="absolute";
            // img1.style.top="580px";
            // img1.style.left="65px";
            // document.body.appendChild(deviceDiv);
            // document.body.appendChild(img);
            // document.body.appendChild(img1);
            // document.body.appendChild(deviceDiv1);
            // button.style.position = 'absolute';
            // button.style.left = '2px';
            // button.style.top = '2px';
            // document.body.appendChild(button);
            $("#saveChart").click(function () {
                var encoder = new mxCodec();
                var node = encoder.encode(graph.getModel());
                var xml = mxUtils.getXml(node);
                console.log(xml);
                console.log(typeof xml);
                $.ajax({
                    type: "POST",
                    url: "/multipower/graphInfo/updateGraph",
                    dataType: "json",
                    async: false,
                    data: {graphId: 6, xmlString: xml},
                    success: function (data) {
                        if (data.message == 'success') {
                            $("#delcfmModel2").modal("show");
                        }
                        if (data.message == 'edgeError') {
                            $("#delcfmModel3").modal("show");
                        }
                    }
                })
            })
            //     var keyHandler = new mxDefaultKeyHandler(graph);
            //      keyHandler.bindAction(46, function (evt) {
            //     console.log(1);
            //     if (graph.isEnabled()) {
            //         graph.removeCells();
            //     }
            // });
        }
    }

    // function addToolbarItemEdge(graph, toolbar1, prototype, image)
    // {
    //     // 添加、删除功能
    //     var funct = function(graph, evt, cell)
    //     {
    //         graph.stopEditing(false);
    //
    //         var pt = graph.getPointForEvent(evt);
    //         var edge = graph.getModel().cloneCell(prototype);
    //         edge.geometry.x = pt.x;
    //         edge.geometry.y = pt.y;
    //
    //         graph.addCell(edge);
    //         graph.setSelectionCell(edge);
    //     }
    //     // 创建拖动预览图标
    //     var img = toolbar.addMode(null, image, funct);
    //     mxUtils.makeDraggable(img, graph, funct);
    //     return img;
    // }

</script>
</head>

<!-- 页面载入后启动程序. -->
<body>
<!--提示模态框-->
<div class="modal fade" id="delcfmModel1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">该设备已在编辑区中，无法拖入!</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button type="button" class="btn btn-primary" onclick="deleteDeviceById()">确定</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--提示模态框结束-->
<!--提示模态框-->
<div class="modal fade" id="delcfmModel2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel2">提示</h4>
            </div>
            <div class="modal-body">保存成功!</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button type="button" class="btn btn-primary" onclick="deleteDeviceById()">确定</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--提示模态框结束-->
<!--提示模态框-->
<div class="modal fade" id="delcfmModel3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel3">提示</h4>
            </div>
            <div class="modal-body">保存失败!请确认边是否连接在设备上。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button type="button" class="btn btn-primary" onclick="deleteDeviceById()">确定</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--提示模态框结束-->
<div style="width: 167px;position:absolute;top: 26px;left: 0;z-index: 999">
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <div class="layui-colla-title">设备列表</div>
            <div class="layui-colla-content layui-show" id="tbContainer" style="overflow-y: scroll;overflow-x: hidden">
            </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">属性列表</div>
            <div class="layui-colla-content layui-show" id="tbContainer1" style="overflow-y: scroll;overflow-x: hidden">
            </div>
        </div>
    </div>
</div>
</body>
</html>